<template>
  <section class="grant-upload">
    <el-dialog v-el-drag-dialog :close-on-click-modal="false" :visible.sync="visible" title="上传文件" center width="500px"
               @close="handleCancel()">
      <el-upload
          ref="upload"
          v-loading="loading"
          element-loading-text="正在上传请稍后"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          :auto-upload="false"
          :on-success="onsuccess"
          :on-error="onerror"
          :action="upload.action"
          :headers="uploadHeaders"
          :data="uploadData"
          accept=".xls, .xlsx"
          drag
      >
        <i class="el-icon-upload"/>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div slot="tip" class="el-upload__tip">
          只能上传.xls,.xlsx
        </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="handleCancel()">取 消</el-button>
        <el-button style="padding: 8px 30px;" type="primary" @click="handleComit()">确认</el-button>
      </span>
    </el-dialog>
  </section>
</template>
<script>
import elDragDialog from '@/directive/el-drag-dialog'
import permission from '@/directive/permission/index.js'
import {getToken} from '@/utils/auth'
import {exportSign, importSign} from '@/utils/fileImportOrExportSign'

export default {
  name: 'GrantUpload',
  directives: {permission, elDragDialog},
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      uploadHeaders: {'ttsxyhcs': getToken()},
      uploadData: {
        redpacketsActivityId: this.id
      },
      upload: {
        action: '/API-ENTERPRISE-BACKEND/backend/redpacketsActivityLimit/redpacketsActivityLimitImport'
      }
    }
  },
  created() {
    this.visible = true
  },
  methods: {
    handleComit() {
      this.$set(this, 'uploadHeaders', importSign(this.uploadHeaders, this.uploadData))
      this.loading = true
      this.$refs.upload.submit()
    },

    handleCancel() {
      this.$emit('cancel')
    },

    onsuccess(data) {
      this.loading = false
      if (data.code === '200') {
        this.$message({
          message: '导入成功',
          type: 'success'
        })
        this.visible = false
        this.$refs.upload.clearFiles()
        this.$emit('success')
      } else {
        this.$message.error('导入失败，详细信息请查看错误信息文件')
        this.$refs.upload.clearFiles()
        if (data.data && data.data.uuid) {
          setTimeout(() => {
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = '/API-ENTERPRISE-BACKEND/backend/redpacketsActivityLimit/redpacketsActivityLimitImportDownload' + exportSign({uuid: data.data.uuid}).paramStr
            link.setAttribute('download', '错误信息.xls')
            link.setAttribute('target', '_blank')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
          }, 1000)
        } else if (data.msg) {
          this.$message.error(data.msg)
        }
      }
    },

    onerror(err) {
      this.loading = false
      this.$message.error(err.msg || '网络异常')
    }
  }
}
</script>
<style lang="scss">
.grant-upload {
  .el-upload {
    width: 100%;

    .el-upload-dragger {
      width: 100%;
    }
  }

  .el-upload__tip {
    > span {
      display: inline-block;
      @include font-color($mainColor);
      font-size: 14px;
      float: right;
      text-decoration: underline;

      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
